<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="20" class="search">
        <el-col :span="4">
          <el-input v-model="queryData.title" placeholder="根据用户名搜索"></el-input>
        </el-col>
        <el-col :span="1">
          <el-button @click="resetInfo">清除</el-button>
        </el-col>
        <el-col :span="1">
          <el-button @click="getPowerList" type="primary" class="btn_search">搜索</el-button>
        </el-col>
        <el-col :span="2" style="float: right">
          <el-button @click="addPowerList" class="addUser" type="success" icon="el-icon-edit">新增权限组</el-button>
        </el-col>
      </el-row>
      <!-- 消息提示 -->
      <el-alert :closable="false" title="消息提示的文案" type="info" show-icon>
        <template slot="title">
          共 {{ total }}条数据
        </template>
      </el-alert>
      <!-- 表格区域 -->
      <el-table class="table" ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="400">
        </el-table-column>
        <el-table-column prop="title" label="用户名" width="400">
        </el-table-column>
        <el-table-column sortable prop="create_date" label="日期" width="550">
          <template slot-scope="scope">{{ scope.row.create_date | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="editPower(scope.row)" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" @click="removePower(scope.row)" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        background
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[2, 5, 8, 10]"
        :page-size="queryData.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="fenye">
      </el-pagination>
    </el-card>

    <!-- 新增权限组对话框 -->
    <el-dialog
      title="创建提示组"
      :visible.sync="addPowerdialogVisible"
      width="50%">
      <!-- 表单区域 -->
      <el-form ref="addForm" :rules="addRule" :model="addPowerform" style="width: 400px; margin-left: 120px;" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addPowerform.username"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            :data="menuList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[0]"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addPowerdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPowerCommit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑权限组对话框 -->
    <el-dialog
      @close="closePower"
      title="创建提示组"
      :visible.sync="editPowerdialogVisible"
      width="50%">
      <!-- 表单区域 -->
      <el-form ref="editForm" :rules="addRule" :model="addPowerform" style="width: 400px; margin-left: 120px;" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addPowerform.username"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            highlight-current
            :data="menuList"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[0]"
            :default-checked-keys="editDefaultKeys"
            :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editPowerdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editPowerCommit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { list, add, remove, detail } from '@/api/base/permissions.js'
import { list as menuList } from '@/api/base/menus.js'
export default {
  data () {
    return {
      addPowerform : {
        username: '',
      },
      list: [],
      queryData: {
        keyword: '',
        page: 1,
        pagesize: 8,
        title: ''
      },
      total: 0,
      addPowerdialogVisible: false,
      editPowerdialogVisible: false,
      addRule: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
      },
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      menuList: [],
      editDefaultKeys: [],
      addData: {
        title: '',
        permissions: []
      }
    }
  },

  created () {
    this.getPowerList()
    this.getmenuList()
  },

  methods: {
    // 获取权限组列表
    async getPowerList () {
      const { data: res } = await list(this.queryData)
      this.list = res.list
      this.total = res.counts
      // console.log(res)
    },

    // 每页条数发生变化
    handleSizeChange (val) {
      this.queryData.pagesize = val
      this.getPowerList()
    },
    // 页码发生变化
    handleCurrentChange (val) {
      this.queryData.page = val
      this.getPowerList()
    },
    // 清空搜索框刷新列表
    resetInfo () {
      this.queryData.title = ''
      this.getPowerList()
    },
    // 显示新增权限组
    addPowerList () {
      this.addPowerdialogVisible = true
    },

    // 新增权限组
    async addPowerCommit() {
      // const res = await add(this.addData)
      // console.log(res)
    },

    // 显示编辑用户
    async editPower(row) {
      this.editDefaultKeys = []
      console.log(this.editDefaultKeys);
      this.editPowerdialogVisible = true
      this.addPowerform.username = row.title
      const { data: res } = await detail({id: row.id})
      // console.log(res)
      this.editDefaultKeys = res.permissions
      // console.log(this.editDefaultKeys);
    },
    closePower (){
      // this.$refs.tree.resetField()
    },
    // 编辑权限组
    editPowerCommit() {
      
    },

    // 删除权限组
    removePower(row) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await remove(row)
        // console.log(res)
        if (status !== 200) this.$message.error('删除失败')
        this.$message.success('删除成功');
        this.getPowerList()
      }).catch(() => {
        this.$message('已取消删除')          
      });
    },
    // 获取权限分配列表
    async getmenuList () {
      const res = await menuList()
      if(res.status !== 200) return this.$message.error('获取权限失败')
      this.menuList = [{
        id: 0,
        title: '系统菜单和页面权限点',
        childs: res.data
      }]
      console.log(res)
    }
  }
}
</script>

<style scoped lang='less'>
  /deep/.box-card {
    margin: 20px 20px;
    .search {
      margin-bottom: 20px;
    }
    .btn_search {
      margin-left: 5px;
    }
    .fenye {
      margin-top: 30px;
    }
    .el-button--medium {
      padding: 10px 12px;
    }
    .table {
      margin-top: 20px;
    }
  }
</style>

